<template>
	<view class="indexPage" :style = "{height: DomHeight}">
		<u-swiper :list="list1" indicator indicatorMode="dot" circular height="60vw" radius="0px" @click="goDetail">
		</u-swiper>
		<view class="searchContent">
			<u--input shape="circle" inputAlign="center" placeholder="搜索" suffixIcon="search"
				:suffixIconStyle="iconClass" @focus="goSearch"></u--input>
		</view>
		<bar title="产品展示" :isLink="true" url="/pages/solution/solution"></bar>
		<view class="slideContent">
			<view class="slideItem" v-for="(item,index) in list3" :key='index' @click="goSolutionDetail(item)">
				<u--image class="slideImage" :src="item.images?(api+'/sys/common/static/'+item.images):''"
					shape="square" mode="aspectFill" width="440rpx" height="250rpx"></u--image>
				<view class="slideInfo">
					{{item.describeDesc}}
					<!-- <u-parse :content="item.content"></u-parse> -->
				</view>
			</view>
		</view>
		<bar title="新闻资讯" :isLink="true" url="/pages/news/news"></bar>
		<view class="listContent">
			<view class="listItem" v-for="(item,index) in list2" :key='index' @click="goNewsDetail(item)">
				<u--image class="listImage" :src="item.images?(api+'/sys/common/static/'+item.images):''" shape="square"
					mode="aspectFill" width="240rpx" height="180rpx" radius="8rpx"></u--image>
				<view class="infoContent">
					<view class="listTitle">{{item.name}}</view>
					<view class="listInfo">
						{{item.describeDesc}}
						<!-- <u-parse :content="item.content"></u-parse> -->
					</view>
				</view>
			</view>
		</view>
		<bar title="联系我们" :isLink="false"></bar>
		<view class="contactUs">
			<view class="contactInfoContent">
				<view class="contactInfo">
					<view class="phoneContent">
						<u--image src="/static/index/phone.png" shape="square" mode="aspectFill" width="30rpx"
							height="30rpx"></u--image>
						<view class="phone" @click="callMe('400-666-2181')">400-666-2181</view>
					</view>
					<view class="emailContent">
						<u--image src="/static/index/email.png" shape="square" mode="aspectFill" width="30rpx"
							height="30rpx"></u--image>
						<view class="email">market@dcck.com.cn</view>
					</view>
				</view>
				<view class="qrCodeContent">
					<u--image @longpress="savePhoto('/static/1.png')" src="/static/1.png" shape="square"
						mode="aspectFill" width="104rpx" height="104rpx">
					</u--image>
					<u--image @longpress="savePhoto('/static/2.png')" src="/static/2.png" shape="square"
						mode="aspectFill" width="104rpx" height="104rpx">
					</u--image>
				</view>
			</view>
		</view>
		<view class="privacyStatement">
			<view @click="goPrivacyStatement" class="item specialItem">《隐私声明》</view>
			<view @click="goInfringementStatement" class="item">《侵权声明》</view>
		</view>
		<view class="privacyStatements">苏ICP备11075574号-3</view>
		<view class="content">
			<tabbar :current="0">12121</tabbar>
		</view>
	</view>
</template>

<script>
	import Tabbar from "@/components/tabbar.vue";
	import Bar from "@/components/bar.vue";
	export default {
		components: {
			Tabbar,
			Bar
		},
		onShow() {
			let that = this
			uni.hideTabBar({
				animation: false
			})
			uni.getSystemInfo({
				success: function(res) {
					let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
					model.forEach(item => {
						//适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
						if (res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
							// that.paddingBottomHeight = 40;
							that.DomHeight = "calc(100vh - 140rpx)"
						}
					})
				}
			});
		},
		data() {
			return {
				api: this.$api.baseUrl,
				iconClass: {
					color: "#004DA1",
					fontSize: "52rpx",
					borderLeft: "1rpx solid #D0D0D0",
					padding: "0 0 0 38rpx"
				},
				list1: [],
				list1Data: [],
				list2: [],
				list3: [],
				inputStyle: {
					background: "transparent"
				},
				DomHeight:"calc(100vh - 100rpx)"
			}
		},
		onPullDownRefresh() {
			Promise.all([
				this.$request.get(this.$api.getBanner, {
					type: 1
				}),
				this.$request.get(this.$api.getNewsList, {
					type: '2',
					pageNo: "1",
					pageSize: "5"
				}),
				this.$request.get(this.$api.getNewsList, {
					type: '1',
					pageNo: "1",
					pageSize: "5"
				}),
			]).then(res => {
				uni.stopPullDownRefresh()
				this.list1Data = res[0].result;
				this.list1 = [];
				res[0].result.map(item => {
					this.list1.push(this.$api.baseUrl + "/sys/common/static/" + item.url)
				})
				this.list2 = res[1].result.records
				this.list3 = res[2].result.records
				uni.hideLoading()
			})
		},
		onLoad() {
			Promise.all([
				this.$request.get(this.$api.getBanner, {
					type: 1
				}),
				this.$request.get(this.$api.getNewsList, {
					type: '2',
					pageNo: "1",
					pageSize: "5"
				}),
				this.$request.get(this.$api.getNewsList, {
					type: '1',
					pageNo: "1",
					pageSize: "5"
				}),
			]).then(res => {
				this.list1Data = res[0].result;
				this.list1 = [];
				res[0].result.map(item => {
					this.list1.push(this.$api.baseUrl + "/sys/common/static/" + item.url)
				})
				this.list2 = res[1].result.records
				this.list3 = res[2].result.records
				uni.hideLoading()
			})
		},
		methods: {
			getHeight(){
				// let arrLength = this.resArr.length;
				      return `height: calc((100% - 200px));`
			},
			goSearch(){
				uni.navigateTo({
					url:"/pages/search/search"
				})
			},
			goDetail(index) {
				if (this.list1Data[index].link) {
					uni.navigateTo({
						url: this.list1Data[index].link+"?id="+this.list1Data[index].id
					})
				}
			},
			goSolutionDetail(item) {
				uni.navigateTo({
					url: "../solutionDetial/solutionDetial?id=" + item.id,
				})
			},
			goNewsDetail(item) {
				uni.navigateTo({
					url: "../newsDetial/newsDetial?id=" + item.id,
				})
			},
			goPrivacyStatement() {
				uni.navigateTo({
					url: "/pages/privacyStatement/privacyStatement"
				})
			},
			goInfringementStatement() {
				uni.navigateTo({
					url: "/pages/infringementStatement/infringementStatement"
				})
			},
			callMe(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			savePhoto(url) {
				uni.saveImageToPhotosAlbum({
					filePath: url
				})
			}
		}
	}
</script>

<style lang="scss">
	.indexPage {
		// height: calc(100vh - 100rpx);
		overflow-y: auto;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.searchContent {
		padding: 20rpx 40rpx 10rpx;
		background-color: #FAFAFA;
		.u-input{
			height:40rpx;
			line-height: 40rpx;
			font-size: 24rpx;
			border: 1px solid #d0d0d0!important;
		}
	}

	.slideContent {
		display: flex;
		justify-content: flex-start;
		flex-wrap: nowrap;
		width: calc(100vw - 120rpx);
		overflow-y: hidden;
		overflow-x: auto;
		padding: 10rpx 40rpx;

		.slideItem {
			border-radius: 20rpx!important;
			margin-right: 20rpx;
			width: 440rpx;
			overflow: hidden;
			flex-shrink: 0;
			background-color: #fff;
			box-shadow: 0px 1rpx 0rpx 1rpx rgba(230, 230, 230, .5);

			.slideInfo {
				color: #999999;
				height: 120rpx;
				padding: 24rpx;
				padding-bottom: 0;
				margin-bottom: 24rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
				letter-spacing: 2rpx;
				font-size: 28rpx;
				line-height: 40rpx;
				font-family: PingFang SC-Regular, PingFang SC;
			}
		}
	}

	.listContent {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		flex-wrap: nowrap;
		width: calc(100vw - 80rpx);
		overflow-y: hidden;
		overflow-x: auto;
		padding: 10rpx 40rpx 0;

		.listItem {
			border-radius: 20rpx;
			padding: 32rpx 20rpx;
			margin-bottom: 20rpx;
			width: calc(100% - 40rpx);
			overflow: hidden;
			background-color: #fff;
			box-shadow: 0px 1rpx 0rpx 1rpx rgba(230, 230, 230, .5);
			display: flex;
			flex-wrap: nowrap;

			.infoContent {
				padding-left: 20rpx;
			}

			.listTitle {
				line-height: 40rpx;
				margin-bottom: 20rpx;
				font-size: 30rpx;
				color: #333;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				letter-spacing: 2rpx;
			}

			.listInfo {
				color: #999999;
				font-size: 26rpx;
				line-height: 35rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
				letter-spacing: 2rpx;
				height: 100rpx;
				font-family: PingFang SC-Regular, PingFang SC;
			}
		}
	}

	.contactUs {
		display: flex;
		justify-content: flex-start;
		flex-wrap: nowrap;
		width: calc(100vw - 80rpx);
		overflow-y: hidden;
		overflow-x: auto;
		padding: 10rpx 40rpx;

		.contactInfoContent {
			border-radius: 20rpx;
			padding: 26rpx 20rpx;
			margin-bottom: 20rpx;
			width: calc(100% - 40rpx);
			overflow: hidden;
			background-color: #fff;
			box-shadow: 0px 1rpx 0rpx 1rpx rgba(230, 230, 230, .5);
			display: flex;
			flex-wrap: nowrap;

			.contactInfo {
				height: 104rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				width: 55%;
			}

			.phoneContent,
			.emailContent {
				display: flex;
				justify-content: flex-start;
				flex-wrap: nowrap;
				flex-shrink: 0;
				font-size: 26rpx;
				color: #666666FF;
				align-items: center;
			}

			.phone,
			.email {
				padding-left: 8rpx;
				position: relative;
				top: -4rpx;
			}
		}

		.qrCodeContent {
			display: flex;
			justify-content: space-around;
			flex-wrap: nowrap;
			width: 45%;
		}
	}

	.privacyStatement {
		color: #3C4C76FF;
		font-size: 24rpx;
		text-align: center;
		padding-bottom: 20rpx;
		display: flex;
		flex-wrap: nowrap;
		justify-content: center;
		position: relative;

		.item {
			padding: 0 20rpx;
		}

		.specialItem {
			position: relative;

			&:after {
				content: "";
				display: inline-block;
				height: 22rpx;
				width: 2rpx;
				background-color: #BDBDBDFF;
				position: absolute;
				right: 0;
				top: calc(50% - 11rpx);
			}
		}
	}
	.privacyStatements {
		color: #666666FF;
		font-size: 22rpx;
		text-align: center;
		padding-bottom: 20rpx;
		display: flex;
		flex-wrap: nowrap;
		justify-content: center;
		position: relative;
	
		.item {
			padding: 0 20rpx;
		}
	
		.specialItem {
			position: relative;
	
			&:after {
				content: "";
				display: inline-block;
				height: 22rpx;
				width: 2rpx;
				background-color: #BDBDBDFF;
				position: absolute;
				right: 0;
				top: calc(50% - 11rpx);
			}
		}
	}

	.copright {
		color: #999999FF;
		font-size: 26rpx;
		text-align: center;
		padding-bottom: 20rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
	}
</style>
